<template>
  <header :class="{ isShow: isLogin }">
    <h2 class="header-logo"><router-link to="/home">TCF贸易订单流转系统(v-1.1.4)</router-link></h2>
    <div class="header-user">
      <router-link to="/personmsg"><span class="user-name" title="个人中心"><i></i> {{userName}}</span></router-link>
      <span class="user-exit" @click="userExit" title="退出"><i></i></span>
    </div>
  </header>
</template>

<script>
  import {getInfo, logout} from '@/server/user'
  import {setStore, getStore} from '@/assets/js/common'

  export default {
    data() {
      return {
        userName: '',
        isLogin: true
      };
    },
    mounted(){
      if (!getStore('userMsg'))  return false;
      this.getInfoFn();
    },
    methods: {
      getInfoFn () {
        getInfo().then((res) => {
          try {
            if (res.code == 1) {
             let sData = res.data.datas[0];
             this.userName = sData.userName;
            } else {
            //  this.$message.error(res.message)
             localStorage.clear();
             this.$router.push('/login');
            }

          } catch (e) {
            localStorage.clear();
            this.$router.push('/login');
          }
        }).catch(function (e) {
          localStorage.clear();
          location.reload();
        });
      },
      userExit() {

        //  let mustData = getStore("documentprocess");
        //  let formInstId = getStore("formInstId");
         localStorage.clear();
        //  setStore("formInstId",formInstId);
        //  setStore("documentprocess", mustData);

        logout().then((res) => {
          if (res.code === 1) {
            this.$router.push('/login');
          } else {
            this.$message.error(res.message)
          }
        })
      }
    }
  }
</script>

<style lang="sass">
  .isShow
    display: block !important
  header
    background: #28547E
    width: 100%
    height: 80px
    // padding: 0 20px
    color: #fff
    margin-bottom: 10px
    display: none
    position: fixed
    top: 0
    z-index: 10
    .header-logo
      font-size: 24px
      line-height: 80px
      padding-left: 20px
      transition: all .6s
      &:hover
        opacity: .8
      a
        color: #fff
    .header-user
      position: absolute
      right: 30px
      top: 0
      line-height: 80px
      .user-name
        vertical-align: middle
        color: #fff
        margin: 0 10px
        padding-right: 6px
        transition: all .6s
        i
          display: inline-block
          width: 16px
          height: 16px
          background: url('icon/icon_user@2x.png')
          background-size: 100% 100%
          margin-right: 6px
          vertical-align: text-top
        &:hover
          box-shadow: 0 -2px 0 0 rgba(255, 255, 255, .8) inset
          opacity: .8
          padding-bottom: 10px

      .user-exit
        background: #266BAD
        padding: 0 30px
        cursor: pointer
        transition: all .6s
        display: inline-block
        i
          display: inline-block
          width: 18.75px
          height: 18px
          background: url('icon/icon_exit@2x.png')
          background-size: 100% 100%
          vertical-align: middle
          transition: all .6s
          transform: scale(0.8, 0.8)
        &:hover
          opacity: .8
          i
            transform: scale(1, 1)

</style>
